<template>
  <div>
    <div class="main-box" style="padding-top: 20px;">
      <div class="main-le fl">
        <div class="banner hbanner">
          <!-- <slider :pages="pages" @tap="imgclick" :sliderinit="sliderinit"> -->
    <!-- slot  -->
  <!-- </slider> -->
    <swiper v-if="pages.length > 1" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item in this.pages" :key="item.index" @click.native="swiperClick(item)">
      <img :src="item.style.background" width="100%" height="480px" alt="">
      <div class="tip">{{item.style.title}}</div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
        </div>
      </div>
      <div class="main-ri fr">
        <div class="home-column ">
          <span class="fr" @click="temple()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="寺院场所" name="first">
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="sm-list sm-list2">
          <dl v-for="(item, index) in mingshabaosi" @click="gotodetails(item)" v-if='index<=3' :key="item.index">
            <dt @click="gotodetails(item)">
              <!-- <a><img :src="'http://img.shanghaifoxie.com' + item.pic" width="90" height="90" alt=""></a> -->
              <a style="line-height: 90px;text-align: center;display: block;" v-if="item.pic === ''">暂无图片</a>
              <a v-if="item.pic !== ''"><img :src="'http://img.shanghaifoxie.com' + item.pic" width="90" height="90" alt=""></a>
            </dt>
            <dd>
              <h3 @click="gotodetails(item)">
                <a>{{item.title}}</a>
              </h3>
              <div class="con">{{item.remark.substr(0,50)}}
                <a @click="gotodetails(item)" class="more">[详情]</a>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <!-- <div class="main-box">
      <div class="home-column ">
        <span class="fr">更多 &gt;&gt;</span>
        <el-tabs v-model="activeName">
          <el-tab-pane label="地图导览" name="first">
            
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class=" map ">
                                <object id="MediaPlayer1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="495" align="middle">
                                <param name="movie" value="@/static/shemaps16.swf">
                                <param name="quality" value="high">
                                <param name="wmode" value="opaque">
                                <param name="swfversion" value="6.0.65.0">
                                <param name="expressinstall" value="Scripts/expressInstall.swf">
                                <object type="application/x-shockwave-flash" data="../../../static/shemaps16.swf" width="1000" height="495">
                                <param name="quality" value="high">
                                <param name="wmode" value="opaque">
                                <param name="swfversion" value="6.0.65.0">
                                <param name="expressinstall" value="Scripts/expressInstall.swf">
                                <div>
                                <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
                                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com//images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33"></a></p>
                                </div>
                                </object>
                                </object>
    
                            </div>
    </div> -->
  </div>
</template>

<script>
// import slider from 'vue-concise-slider'; // 引入slider组件
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  data() {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
        notNextTick: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        loop: true,
        preventLinksPropagation: true,
        paginationClickable: true,
        mousewheelControl: true
      },
      pages: [],
      // 滑动配置[obj]
      sliderinit: {
        currentPage: 0, // 当前页码
        thresholdDistance: 100, // 滑动判定距离
        thresholdTime: 100, // 滑动判定时间
        autoplay: 3000, // 自动滚动[ms]
        loop: true, // 循环滚动
        direction: 'horizontal', // 方向设置，垂直滚动
        infinite: 1, // 无限滚动前后遍历数
        slidesToScroll: 1 // 每次滑动项数
      },
      activeName: 'first',
      request: {
        pageNo: '0',
        pageSize: '10',
        indexType: '6'
      },
      mingshabaosi: [],
      ditu: [], // 这个地方还没有数据，
      images: []
    };
  },
  created() {
    this.init();
    this.$parent.activeIndex2 = '6';
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // this.swiper.slideTo(3, 1000, false);
  },
  methods: {
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/pageIndex`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            let imgs = response.data.data.image;
            for (let i = 0; i < imgs.length; i++) {
              this.pages.push({
                style: {
                  background: 'http://img.shanghaifoxie.com' + imgs[i].pic,
                  id: imgs[i].id,
                  title: imgs[i].title
                }
              });
            }
            let dataArr = response.data.data.list;
            for (let i = 0; i < dataArr.length; i++) {
              if (dataArr[i].type === 22) {
                // 名寺宝刹
                this.mingshabaosi = dataArr[i].data;
              }
              if (dataArr[i].type === 0) {
                // 现任会长
                this.ditu = dataArr[i].data;
              }
            }
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    // 名寺宝刹
    temple() {
      let type = 22;
      this.$router.push({ path: `/pageList/${type}` });
    },
    gotodetails(item) {
      this.$router.push({ path: `/details/${item.id}` });
    },
    swiperClick(item) {
      this.$router.push({
        path: `/details/${item.style.id}`
      });
    },
    imgclick(item) {
      this.$router.push({
        path: `/details/${this.pages[item.currentPage].style.id}`
      });
    }
  },
  // components: {
  //   // Swiper
  //   slider
  // }
  components: {
    swiper,
    swiperSlide
  }
};
</script> 

<style lang="less">
.fr {
  float: right;
}
.fl {
  float: left;
}
.sm-list2 {
  padding-top: 8px;
  dl {
    margin: 10px 0;
  }
}

.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 20px;
  .main-le {
    width: 600px;
    .banner {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
      border: 1px solid #ddd;
      img {
        // height: 448px;
      }
    }
    .hbanner {
      height: 480px !important;
    }
  }
  .main-ri {
    width: 380px;
    .sm-list {
      dl {
        width: 100%;
        float: left;
        dt {
          width: 90px;
          height: 90px;
          float: left;
        }
        dd {
          width: 278px;
          line-height: 18px;
          padding-left: 12px;
          float: right;
          height: auto;
          overflow: hidden;
          h3 {
            font-size: 16px;
            font-weight: normal;
            line-height: 32px;
          }
          .con {
            line-height: 18px;
            height: 54px;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>